<!-- 描述：本文件是一个门户登陆页面，可以将用户登录信息交给服务器进行判断 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/login.css" type="text/css"/>
    <title>成绩评估系统</title> <!-- 网页标题 -->
</head>
<body>
    <div class="signinform">
        <!-- 校徽 -->
        <div style="width: 600px;">
            <img src="img/logo.png" alt="校徽图片">
        </div>
        
        <!-- 登录 -->
        <div class="container">
            <div class="w3l-form-info">
                <div class="w3_info">
                    <h1>TeachEvalPro</h1>

                    <!-- 选择身份 -->
                    <div class="SelectLine" style="margin-top:20px">
                        <h2>成绩评估系统</h2>
                        <select class="form-select form-select-sm" style="display: flex;width: 150px;height: 40px;margin-left: auto;" aria-label=".form-select-sm example">
                            <option selected>选择登录身份</option>
                            <option value="1">课程主任</option>
                            <option value="2">任课教师</option>
                        </select>
                    </div>

                    <!-- 登录信息 -->
                    <form id="login-form" action="#" method="post">
                        <!-- 用户名 -->
                        <div class="input-group">
                            <span><img style="width: 25px;" src="img/user.svg" alt="用户图片"></span>
                            <input type="text" name="username" placeholder="用户名  教工号" required>
                        </div>

                        <!-- 信息门户密码 -->
                        <div class="input-group">
                            <span><img src="img/key.svg" alt="密码图片"></span>
                            <input type="Password" name="password" placeholder="信息门户密码 非校园网密码" required>
                        </div>

                        <!-- 验证码 -->
                        <div class="input-validate">
                            <img src="https://s2.loli.net/2024/03/14/LF8wxzaugOCoqyU.png" alt="验证码图片">
                            <input class="form-control form-control-sm" type="text" name="verification_code" placeholder="请输入验证码" aria-label=".form-control-sm example" required>
                        </div>

                        <!-- 提交按钮 -->
                        <button class="btn btn-primary btn-block" id="submit-btn" type="submit">登录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 通过 JS 监听表单的提交事件，当用户点击登录按钮提交表单时，会执行这个匿名函数内的逻辑（Fetch API 是 Web 开发中用于发送和接收网络请求的现代 JS API）
        document.getElementById('login-form').addEventListener('submit', function(event) { //获取 id='login-form' 的 <form> 表单元素，并为其添加了一个 submit 提交事件监听器，当用户提交表单时，会触发这个匿名回调函数内的逻辑，并且传递一个 event 事件对象
            event.preventDefault(); // 阻止表单的默认提交行为，这样可以通过 JS 来处理表单的提交操作，而不是让浏览器自动提交 
    
            // 提取表单数据
            var formData = new FormData(event.target); // 将表单数据封装成一个键值对的集合
    
            // 发送 POST 请求到指定服务器
            fetch('http://localhost:3611/login', { // fetch 就是一个 Promise 对象
                method: 'POST',
                body: formData
            })
            .then(response => response.json()) //处理服务器返回的响应数据，将响应体解析为 JSON 格式
            .then(data => {
                console.log(data); // 返回控制台日志
                var confirmation = confirm(JSON.stringify(data)); // 显示确认弹窗
                if (confirmation) {
                    // 用户点击确认按钮后的处理逻辑
                    console.log('User confirmed.');
                } else {
                    // 用户点击取消按钮后的处理逻辑
                    console.log('User cancelled.');
                }
            })
            .catch(error => { //整个 Promise 链中任何一个 Promise 返回错误或被拒绝，则会触发 .catch()
                console.error('Error:', error);
            });
        });
    </script>
    
</body>
</html>

